<!-- 2-22 系统课介绍   createBy @21-2-22-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统课介绍</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/sysCourseRecom.css">
</head>

<body>
    <script src="./js/jq.min.js"></script>
    <script>
        function onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": "wx2421b1c4370ec43b", //公众号ID，由商户传入     
                    "timeStamp": "1395712654", //时间戳，自1970年以来的秒数     
                    "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串     
                    "package": "prepay_id=u802345jgfjsdfgsdg888",
                    "signType": "MD5", //微信签名方式：     
                    "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
                },
                function (res) {
                    console.log(res);
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    }
                });
        }
        if (typeof WeixinJSBridge == "undefined") {
            console.log(111);
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            console.log(222);
            onBridgeReady();
        }
        // let str = window.location.search.split("&")[0].split("=")[1]
        // console.log(str);
        // if (str) {
        //     let data = {
        //         code: str
        //     }
        //     // console.log(JSON.stringify(data));
        //     $.ajax({
        //         type: "post",
        //         data: `code=${str}`,
        //         url: `http://139.186.155.167/api/student/wx_login`,
        //         success: function (res) {
        //             console.log(res);
        //         }
        //     });
        // } else {
        //     location.href =
        //         "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx79d0226a12c775e5&redirect_uri=http://t.kexuemihe.com/studentPort/sysCourseRecom.html&response_type=code&scope=snsapi_base&state=6666#wechat_redirect"
        // }
    </script>
    <div id="headerImg">
        <img src="./images/sysCourseRecom/封面.png">
        <div id="courseInfo">
            <h4>科学芈盒系统课</h4>
            <p>赠送科学实验大礼包</p>
            <div>
                <i>¥</i><span>2388</span><strong>原价¥3800</strong>
            </div>
        </div>
    </div>
    <div id="recommend">
        <!-- 课程大纲 -->
        <div id="courseOutline" class="sameBox">
            <h4>课程大纲</h4>
            <div id="tabTool">
                <span class="active">Level 1</span>
                <span>Level 2</span>
                <span>Level 3</span>
            </div>
            <div class="level">
                <p class="textCon">Level1 适合未系统学习过科学课的孩子，学习目标是激发孩子认识世界的探索欲，锻炼专注能力和手部精细动作，掌握分类对比等基础的科学思维方法，培养观察能力和想象力的提升
                </p>
                <div id="middleList">
                    <div class="block">
                        <div>
                            <span>700+</span><strong>件</strong>
                        </div>
                        <strong>环保实验器材</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>400+</span><strong>张</strong>
                        </div>
                        <strong>思维导图知识卡</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>240+</span><strong>次</strong>
                        </div>
                        <strong>自主探索实践</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>125+</span><strong>个</strong>
                        </div>
                        <strong>科普小故事</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>200+</span><strong>次</strong>
                        </div>
                        <strong>科学原理</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>365+</span><strong>天</strong>
                        </div>
                        <strong>科学老师伴学</strong>
                    </div>
                </div>
                <h6>- 学完将获得 -</h6>
                <p class="textCon teshu" style="margin-top: 10px;">对科学建立学习探索兴趣，树立积极的科学态度，对生活中常见的现象，建立初步的科学认知</p>
                <p class="textCon teshu" style="margin-top: 10px;">六大能力提升：想象力、记忆力、专注力、观察力、手脑协调能力、自主探索能力</p>
                <p class="textCon teshu" style="margin-top: 10px;">锻炼幼儿的手部精细动作，开发大脑潜能</p>
            </div>
            <div class="level dn">
                <p class="textCon">Level2
                    适合有一定科学知识积累的孩子，学习目标是帮助孩子建立空间认知的概念，能够适用工具进行科学探究，运用逻辑推理思维进行动手实践验证。提升认知能力，培养抽象思维能力
                </p>
                <div id="middleList">
                    <div class="block">
                        <div>
                            <span>700+</span><strong>件</strong>
                        </div>
                        <strong>环保实验器材</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>400+</span><strong>张</strong>
                        </div>
                        <strong>思维导图知识卡</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>240+</span><strong>次</strong>
                        </div>
                        <strong>自主探索实践</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>125+</span><strong>个</strong>
                        </div>
                        <strong>科普小故事</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>200+</span><strong>次</strong>
                        </div>
                        <strong>科学原理</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>365+</span><strong>天</strong>
                        </div>
                        <strong>科学老师伴学</strong>
                    </div>
                </div>
                <h6>- 学完将获得 -</h6>
                <p class="textCon teshu" style="margin-top: 10px;">生命科学、物质科学、工程技术、地球宇宙四个领域的跨学科知识，认识基础的科学现象，建立对应的科学认知</p>
                <p class="textCon teshu" style="margin-top: 10px;">六大能力提升：想象力、记忆力、专注力、观察力、判断能力自主探索能力</p>
                <p class="textCon teshu" style="margin-top: 10px;">形成善于发现问题、提出问题的思考习惯，学会发现身边的科学现象，勇于探索、假设、验证</p>
            </div>
            <div class="level dn">
                <p class="textCon">Level3 适合抽象思维发展的孩子，引导孩子学会建立探究的科学流程，在探索过程学会团队协作，树立环保意识，能在实验结果基础上独立思考，多次实践寻找解决问题的方法</p>
                <div id="middleList">
                    <div class="block">
                        <div>
                            <span>700+</span><strong>件</strong>
                        </div>
                        <strong>环保实验器材</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>400+</span><strong>张</strong>
                        </div>
                        <strong>思维导图知识卡</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>240+</span><strong>次</strong>
                        </div>
                        <strong>自主探索实践</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>125+</span><strong>个</strong>
                        </div>
                        <strong>科普小故事</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>200+</span><strong>次</strong>
                        </div>
                        <strong>科学原理</strong>
                    </div>
                    <div class="block">
                        <div>
                            <span>365+</span><strong>天</strong>
                        </div>
                        <strong>科学老师伴学</strong>
                    </div>
                </div>
                <h6>- 学完将获得 -</h6>
                <p class="textCon teshu" style="margin-top: 10px;">
                    建立生命科学、物质科学、工程技术、地球宇宙四个领域的跨学科知识体系，提升STEAM综合实力，具备初步的科学思维能力</p>
                <p class="textCon teshu" style="margin-top: 10px;">六大能力提升：团队协作能力、自主探索能力、独立思考能力创造力、逻辑思维能力、解决问题能力</p>
                <p class="textCon teshu" style="margin-top: 10px;">形成良好的科学思考习惯，善于运用多种思维方式，建立自信能力和抗挫能力</p>
            </div>
            <div id="cliOutline">
                <button>查看完整大纲</button>
            </div>
        </div>
        <!-- 课程特色 -->
        <div id="courseSpecial" class="sameBox">
            <h4>科学芈盒系统课有什么特色</h4>
            <img src="./images/sysCourseRecom/1.png" alt="">
            <h5>五大教育理念依据</h5>
            <img src="./images/courseRecommend/1.png" alt="">
        </div>
        <!-- 5E探究式教学法 -->
        <div id="fiveE" class="sameBox">
            <h4>5E探究式教学法</h4>
            <ul>
                <li>
                    <i style="background: #FFEFCD url(./images/courseRecommend/deng.png) no-repeat 50% 50%/60%;"></i>
                    <span>引入</span>
                    <strong>动画故事 引出问题</strong>
                </li>
                <li>
                    <i style="background: #FFEFCD url(./images/courseRecommend/science.png) no-repeat 50% 50%/60%;"></i>
                    <span>探究</span>
                    <strong>互动实验 寻找答案</strong>
                </li>
                <li>
                    <i style="background: #FFEFCD url(./images/courseRecommend/taolun.png) no-repeat 50% 50%/60%;"></i>
                    <span>解释</span>
                    <strong>动画形式 解析原理</strong>
                </li>
                <li>
                    <i
                        style="background: #FFEFCD url(./images/courseRecommend/shenghuo.png) no-repeat 50% 50%/60%;"></i>
                    <span>迁移</span>
                    <strong>联系生活 融会贯通</strong>
                </li>
                <li>
                    <i style="background: #FFEFCD url(./images/courseRecommend/dianzan.png) no-repeat 50% 50%/60%;"></i>
                    <span>评价</span>
                    <strong>探讨交流 反思提升</strong>
                </li>
            </ul>
        </div>
        <!-- 进阶式课程体系 -->
        <div id="JinJie" class="sameBox">
            <h4>进阶式课程体系</h4>
            <img src="./images/sysCourseRecom/2.png">
        </div>
        <!-- 配套环保教具 -->
        <div id="teachTool" class="sameBox">
            <h4>配套环保教具</h4>
            <p class="textCon" style="color: #333333;
    font-weight: bold;">配套环保教具</p>
            <p class="textCon">全年10个实验原创礼盒（一期一个礼盒）+1个公共材料箱
                每节课包含5张思维导图卡片，培养孩子科学的思考习惯</p>
            <img src="./images/courseRecommend/ba.png" alt="">
        </div>
        <!-- 上课方式 -->
        <div id="onClassWay" class="sameBox">
            <h4>上课方式</h4>
            <p class="textCon" style="color: #F96B15;text-align: center;">APP互动课堂+科学老师启发式教学</p>
            <img src="./images/sysCourseRecom/phone.png" style="width: 60%;" alt="">
            <p class="textCon title">实验互动探究课堂</p>
            <p class="textCon" style="margin-bottom: 15px;">每周一节，AI智能互动方式，引导孩子自主探究</p>
            <p class="textCon title">知识拓展积累</p>
            <p class="textCon">抽象科学概念转为图形记忆，注重生活应用，关注学习全过程</p>
        </div>
        <!-- 常见问题 -->
        <div id="oftenProblem" class="sameBox">
            <h4>常见问题</h4>
            <ul>
                <li>
                    <p class="textCon" style="color:#333;font-weight: bold;">如何上课？</p>
                </li>
                <li>
                    <p class="textCon">购课后下载“科学小伙伴”APP，进入“我的课程”进行课程学习</p>
                </li>
                <li>
                    <p class="textCon" style="color:#333;font-weight: bold;">如何查询实验礼包物流？</p>
                </li>
                <li>
                    <p class="textCon">随材礼包于购课后3-5个人工作日寄送，寄送后发送物流
                        短信通知</p>
                </li>
                <li>
                    <p class="textCon" style="color:#333;font-weight: bold;">购买后可以退费吗？</p>
                </li>
                <li>
                    <p class="textCon">本课程一经售出，立即开通上课权限，并寄送配套材料，
                        由于在线课程的特殊性质，购买成功后不接受退费</p>
                </li>
            </ul>
        </div>
    </div>
    <div id="buyBtn">
        <button>立即购买</button>
    </div>
    <div id="loginZheZhao">
        <div id="phoneLogin">
            <p>报名前请先验证手机</p>
            <div class="outBorder">
                <input type="text" id="phone" placeholder="请输入手机号">
            </div>
            <div class="outBorder">
                <input type="text" id="YZM" placeholder="请输入验证码">
                <button id="getYZM">获取验证码</button>
            </div>
            <div id="submit">
                <button>确认登录</button>
            </div>
            <div id="isAgree">
                <span class=""></span>
                <strong>我已阅读并同意<i>《用户协议》</i>和<i>《隐私协议》</i></strong>
            </div>
            <img src="./images/close_cricle.png" alt="" id="closeBtn">
        </div>
    </div>
    <div id="dislog">
        <div class="centerBox">
            <p id="alertText">购买成功</p>
            <p class="dn">请打开APP查看</p>
            <div id="alertBtn">
                确定
            </div>
        </div>
    </div>
    <script>
        var tabBtn = $("#tabTool span");
        let ind = 0;
        tabBtn.click(function (e) {
            e.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
            // console.log($(this).index());
            let btnIndex = $(this).index();
            ind = btnIndex;
            let levelBoxs = $(".level");
            // console.log(levelBoxs);
            // console.log($(levelBoxs[btnIndex]));
            $(levelBoxs[btnIndex]).slideDown(600).siblings(".level").slideUp(0);
        });
        $("#cliOutline").click(function (e) {
            e.preventDefault();
            location.href = `./courseOutline.html?ind=${ind}`;
        });
        /** 是否已经阅读的单选框
         * 
         */
        $("#isAgree").click(function (e) {
            e.preventDefault();
            let bool = $("#isAgree span").hasClass("active");
            !bool ? $("#isAgree span").addClass("active") : $("#isAgree span").removeClass("active");
        });
        /**  获取验证码按钮
         * 
         */
        $("#getYZM").click(function (e) {
            e.preventDefault();
            // 点击发送验证码---------------------------------
            var UserTelCon = $("#phone").val();
            let that = this;
            console.log(UserTelCon);
            let i = 60;
            if ((/^1[3456789]\d{9}$/.test(UserTelCon))) {
                $.ajax({
                    type: "get",
                    url: `http://139.186.155.167/api/sms/send?mobile=${UserTelCon}&type=1&event=mobilelogin`, //默认给type为1因为这个学生端，默认为学生
                    success: function (res) {
                        console.log(res);
                        if (res.code == 0) {
                            $("#alertText").text(res.msg);
                            $("#dislog").show();
                        } else {
                            $(that).text(`${i}秒`).attr("disabled", "disabled");
                            var timer = setInterval(() => {
                                i--;
                                $(that).text(`${i}秒`);
                                if (i == 0) {
                                    $(that).text(`获取验证码`);
                                    $(that).attr("disabled", false);
                                    clearInterval(timer);
                                }
                            }, 1000);
                        }
                    }
                });
            } else {
                $("#alertText").text("请先输入手机号");
                $("#dislog").show();
            }

        });
        /**  登录按钮
         * 
         */
        $("#submit").click(function (e) {
            e.preventDefault();
            let bool = $("#isAgree span").hasClass("active");
            let tel = $("#phone").val();
            let YZM = $("#YZM").val();
            if (!bool) {
                $("#alertText").text("请先阅读协议");
                $("#dislog").show();
                return false;
            }
            if (!tel) {
                $("#alertText").text("请输入手机号");
                $("#dislog").show();
                return false;
            }
            if (!YZM) {
                $("#alertText").text("请输入验证码");
                $("#dislog").show();
                return false;
            }
            $.ajax({
                type: "post",
                url: `http://139.186.155.167/api/student/login`,
                success: function (res) {
                    console.log(res);
                    if (res.code == 0) {
                        $("#alertText").text(res.msg);
                        $("#dislog").show();
                        return false;
                    }
                    console.log("登陆成功");
                }
            });
        });
        /** 关闭按钮
         * 
         */
        $("#closeBtn").click(function (e) {
            e.preventDefault();
            $("#loginZheZhao").hide();
        });
        /*  立即购买按钮
         *
         */
        $("#buyBtn").click(function (e) {
            e.preventDefault();
            $("#loginZheZhao").show();
        });
        /* 弹窗确定按钮
         */
        $("#alertBtn").click(function (e) {
            e.preventDefault();
            $("#dislog").hide();
        });
    </script>

</body>

</html>